<template>
  <div class="person">
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.name }}=={{ item.age }}
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts" name="person">
import { ref } from "vue";
import { type PersonInter, type Persons } from "@/types/index";
// 接收list
// defineProps(['list'])

// 接收list+限制类型
// defineProps<{list:Persons}>()

// 接收list+限制类型 + 限制必要性 + 指定默认值
// 问号就是父亲不传的时候v-for就会罢工 停止循环 但不会在父亲组件上面报错
// withDefaults控制默认值,当父亲不给儿子传:list="personList"的时候就会显示后边定义的默认值
withDefaults(defineProps<{ list?: Persons }>(), {
  list: () => [
    {
      id: "dadada",
      name: "康师傅王麻子",
      age: 19,
    },
  ],
});
</script>

<style scoped>
button {
  margin: 0 5px;
}
.person {
  border-radius: 10px;
  background-color: #8ee6ea;
  margin: 20px;
}
li {
  font-size: 15px;
}
.person input {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
